<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓储管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        form {
            margin-bottom: 20px;
        }
        input[type="text"], input[type="number"] {
            padding: 5px;
            margin-right: 10px;
        }
        input[type="submit"] {
            padding: 5px 10px;
        }
        .custom-select {
        position: relative;
        width: 150px;
        height: 25px;
        user-select: none; /* 禁止选中文本 */
        }
    </style>
</head>
<body>
    <h1>仓储管理系统</h1>
    <form id="inventoryForm">
        种类:<select id="zl" class="custom-select" >
        <option value="滑轮">滑轮</option>
        <option value="滑块">滑块</option>
        <option value="导绳器">导绳器</option>
        <option value="异形件">异形件</option>
        </select>

        尺寸:<input type="text" id="cc" value="3" required>
        数量:<input type="text" id="sl" value="4" required>
        名称:<input type="text" id="mc" value="2" required>
        图号:<input type="text" id="th" value="2" required>
        <br>
        <button id = "login" type="button">添加物品</button>
    </form>
    <table id="studentTable">
      <thead>
        <tr>
          <th>种类</th>
          <th>名称</th>
          <th>尺寸</th>
          <th>数量</th>
          <th>图号</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
</body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script>
           $.ajax({
            type: "POST",
            url: "/a",
            data: {data:'data'},
            success: function (message) {
                console.log(message)
                console.log("提交成功" )
                for (let i = 0; i < message.length+1; i++) {
                    each_list = message[i]
                    each_list_number = each_list[0]
                    each_list_name = each_list[2]
                    each_list_type = each_list[1]
                    each_list_size = each_list[3]
                    each_list_quantity = each_list[4]
                    var table = document.getElementById("studentTable");

                    // 创建新行
                    var newRow = table.insertRow();

                    // 创建新单元格并填充数据
                    var cell1 = newRow.insertCell(0);
                    var cell2 = newRow.insertCell(1);
                    var cell3 = newRow.insertCell(2);
                    var cell4 = newRow.insertCell(3);
                    var cell5 = newRow.insertCell(4);

                    cell1.innerHTML = each_list_type;
                    cell2.innerHTML = each_list_name;
                    cell3.innerHTML = each_list_size;
                    cell4.innerHTML = each_list_quantity;
                    cell5.innerHTML = each_list_number;


                    console.log(each_list_number)
                    console.log(each_list_number,each_list_name,each_list_quantity,each_list_size,each_list_type)
                    console.log(message[i])
                }


            },
            error: function (message) {
                console.log(message)
                console.log("提交失败");
            }
        });


    </script>

</html>
